<template>
	<view class="wrap">
		<u-navbar :custom-back="$back" :back-icon-color="navbar.titleColor" is-back :title="navbar.title"
			:background="navbar.background" :title-color="navbar.titleColor">
		</u-navbar>
		<view class="content">
			<view class="title">
				当前岗亭: {{ form.sentryBoxName }}
			</view>
			<radio-group @change="handleChange">
				<view class="radio-label" v-for="(item, index) in sentryBoxList" :key="index">
					<radio :value="item.sentryBoxId">{{ item.sentryBoxName }}</radio>
				</view>
			</radio-group>
		</view>
		<view class="footer">
			<!-- <view @click="$back">返 回</view> -->
			<view @click="login">确认登录</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//头部标题配置
				navbar: {
					title: "访客预约记详情",
					background: {
						backgroundColor: '#2373FA',
					},
					titleColor: "#ffffff",
				},
				gapHeight: 10,
				condition: {},
				form: {},
				popup: false,
				config: {},
				approvedQR: '',
				saoma: 0,
				sentryBoxList: [],
				sentryBoxId: 0,
			};
		},
		onLoad(option) {
			
			this.config = this.vuex_config;
			
		},
		onShow() {
			this.getData();
		},
		methods: {
			returnBack(){
				uni.navigateBack({
				  delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
				});
			},
			getData(item) {
				// 获取我的岗亭
				this.$u.api.visitor.getMySentryBox().then(async res => {
					console.log(res)
					if(res.data){
						this.form = res.data;
					}else{
						this.form = {sentryBoxName: '暂未选择'};
					}
				})
				
				// 调用岗亭列表接口
				this.$u.api.visitor.sentryBoxListAll().then(async res => {
					console.log(res)
					this.sentryBoxList = res.rows;
				})
			},
			handleChange(e) {
				this.sentryBoxId = e.detail.value;
			},
			login(){
				console.log('this.sentryBoxId',this.sentryBoxId);
				if(this.sentryBoxId != null){
					// 调用登录岗亭接口
					this.$u.api.visitor.sentryBoxLogin({sentryBoxId: this.sentryBoxId}).then(async res => {
						console.log(res);
						if(res.code == 200){
							uni.showToast({
								title: res.msg,
								icon: 'success',
							});
							setTimeout(() => {
								this.returnBack()
							}, 500);
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'error',
							});
						}
					})
				}else{
					uni.showToast({
						title: '请选择岗亭',
						icon: 'error',
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f4f8;
	}
	.radio-label{
		margin-right: 80upx;
		margin-bottom: 80upx;
		font-size: 45upx;
		float: left;
	}

	.wrap {
		padding-bottom: 100upx;
		overflow: hidden;

		/deep/.uni-section-header {
			display: none;
		}

		.content {
			.title {
				font-size: 50upx;
				margin: 50upx;
			}
			.uni-section {
				font-weight: 600;

				/deep/.uni-list-item__extra-text {
					font-size: 14px;
				}
			}

			.rows {
				display: flex;
				min-height: 80upx;
				background-color: #fff;
				padding: 20upx 0;
				word-break: break-all;

				.name {
					flex-shrink: 0;
					color: #030303;
					padding: 0 30upx;
					min-width: 120upx;
					font-weight: 600;
				}

				.value {
					color: #030303;

					&.text-area {
						min-height: 120upx;
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120upx;
		width: 100%;

		>view {
			border-right: 1px solid #CDCDCD;
			background-color: #eee;
			flex: 1;
			color: #252525;
			font-size: 50upx;
			font-weight: bold;
			text-align: center;
			height: 120upx;
			line-height: 120upx;

			&:last-child {
				border-right: none;
				color: #fff;
				background-color: #019FE6;
			}
		}
	}

	.popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.popup image {
		max-width: 90%;
		max-height: 90%;
	}
</style>